<!DOCTYPE html>
<html>
<head>
    <!--Import Google Icon Font-->
    <link type="text/css" rel="stylesheet" href="css/material-icons.css"/>
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
    <title>Add Compute Cell</title>

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

</head>

<body>

<div class="container">
  <div class="section">
    <div class="row">
      <div class="col m6 push-m2" id="main-panel">
        <div class="row">
          <div class="input-field col m4">
            <i class="material-icons prefix">blur_on</i>
            <input type="text" id="pool-name" value="" placeholder="" readonly>
            <label for="pool-name" id="pool-label"></label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col m7">
              <i class="material-icons prefix">view_quilt</i>
              <select name="cell" id="cell-options">
              </select>
              <label id="cell-label"></label>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="divider"></div>
  <div class="section">
      <div class="row">
          <div class="col m2">
              <a class="waves-effect waves-light blue-grey lighten-2 btn" onclick="window.history.back()" id="back-caption"><i
                      class="material-icons left">chevron_left</i></a>
          </div>
          <div class="col m2 right" id="btn-add">
              <button class="waves-effect waves-light blue-grey lighten-2 btn" onclick="addCell()" id="add-caption">
                  <i class="material-icons right">add</i>
              </button>
          </div>
      </div>
  </div>
</div>

<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/nano.js"></script>
<script>
N.ValidateSession();
var texts = N.GetTexts();
$('#back-caption').append(texts.get(N.TagBack));
$('#add-caption').prepend(texts.get(N.TagAdd));

$('#pool-label').text(texts.get(N.TagComputePool));
$('#cell-label').text(texts.get(N.TagCell));

M.AutoInit();
var poolName;

function parseQueryString(){
  var url = window.location.search;
  var queryParams = new Map();
  var queryString = url.substring( url.indexOf('?') + 1 );
  if (0 === queryString.length){
    return queryParams;
  }
  var values = queryString.split("&");
  values.forEach((value) => {
    var p = value.split('=');
    queryParams.set(p[0], p[1]);
  });
  return queryParams;
}

function loadOptions(){
  $.getJSON("/compute_pool_cells/", function(result){
    if (0 != result['error_code']) {
        M.toast({html: 'query unallocated cells fail:' + result['message']});
        return;
    }
    result['data'].forEach((cell) =>{
      $('#cell-options').append(
        $('<option>').attr('value', cell['name']).text(cell['name'] + '('+ cell['address'] +')')
      )
    });
    M.FormSelect.init($('#cell-options'));
  });
}
function addCell(){
  var cellName = $('#cell-options').val();

  $('#btn-add').empty();
  $('#main-panel').empty();

  var table = $('<table>').addClass('striped');
  table.append(
    $('<tr>').append(
      $('<td>').text(texts.get(N.TagComputePool))
    ).append(
      $('<td>').text(poolName)
    )
  ).append(
    $('<tr>').append(
      $('<td>').text(texts.get(N.TagCell))
    ).append(
      $('<td>').text(cellName)
    )
  ).append(
    $('<tr>').append(
      $('<td>').text(texts.get(N.TagResult))
    ).append(
      $('<td>').attr('id', 'request-result')
    )
  );
  $('#main-panel').append(table);

  $.post(
    '/compute_pool_cells/'+ poolName + '/' + cellName,
    "",
    function(result){
      if (0 != result['error_code']) {
        $('#request-result').text(result['message']);
        return;
      }
      $('#request-result').text('success');
      $('#btn-add').append(
        $('<a>').attr('href', '/compute_cells.html?pool=' + poolName).append(
          $('<button>').addClass('waves-effect waves-light blue-grey lighten-2 btn').text(texts.get(N.TagFinish)).prepend(
            $('<i>').addClass('material-icons').text('check')
          )
        )
      );
      N.WriteOperateLog('add cell ' + cellName + 'to compute pool ' + poolName);
    },
    "json"
  );

}

$(function(){
  var params = parseQueryString();
  if (!params.has('pool')){
    M.toast({html: 'must specify pool name'})
    return;
  }
  poolName = params.get('pool');
  $('#pool-name').val(poolName);
  loadOptions();
});
</script>

<script nomodule>
  M.toast({html: 'current browser not support javascript module'});
</script>
</body>
</html>
